import { useI18n } from '@/hooks/web/useI18n'
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { useClipboard } from '@vueuse/core'
import { ElButton, ElLink, ElMessage } from 'element-plus'

const { t } = useI18n()
const { copy } = useClipboard()
export default function (schemaParams: any = {}) {
  const crudSchemas = reactive<CrudSchema[]>([
    // {
    //   field: 'selection',
    //   search: {
    //     hidden: true
    //   },
    //   form: {
    //     hidden: true
    //   },
    //   detail: {
    //     hidden: true
    //   },
    //   table: {
    //     type: 'selection'
    //   }
    // },
    {
      field: 'id',
      label: t('market.industryNews.serialNumber'),
      align: 'center',
      width: '70px',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: false
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'source',
      label: t('market.industryNews.source'),
      align: 'center',
      width: '250px',
      form: {
        hidden: true
      },
      detail: {
        hidden: false
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'title',
      label: t('market.industryNews.title'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: false
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'title_cn',
      label: t('market.industryNews.titleCn'),
      align: 'center',
      form: {
        hidden: true
      },
      detail: {
        hidden: false
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'time',
      label: t('market.industryNews.time'),
      align: 'center',
      width: '250px',
      search: {
        component: 'DatePicker',
        componentProps: {
          valueFormat: 'YYYY-MM-DD',
          type: 'daterange',
          unlinkPanels: true,
          rangeSeparator: '-'
        }
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: false
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'tag',
      label: t('market.industryNews.tag'),
      align: 'center',
      width: '300px',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: false
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'related_coin',
      label: t('market.industryNews.relatedCoin'),
      align: 'center',
      width: '300px',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: false
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'origin_link',
      label: t('market.industryNews.linkToOriginalArticle'),
      align: 'center',
      width: '150px',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        slots: {
          default: (data: any) => {
            return (
              <>
                <ElLink type="primary" href={data.origin_link} target="_blank">
                  跳转
                </ElLink>
                <ElButton
                  link
                  class="m-l-4"
                  type="primary"
                  onClick={() => (copy(data.origin_link) as any) && ElMessage.success('复制成功')}
                >
                  复制
                </ElButton>
              </>
            )
          }
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return (
              <>
                <ElLink type="primary" href={data.row.origin_link} target="_blank">
                  跳转
                </ElLink>
                <ElButton
                  link
                  class="m-l-4"
                  type="primary"
                  onClick={() => (copy(data.origin_link) as any) && ElMessage.success('复制成功')}
                >
                  复制
                </ElButton>
              </>
            )
          }
        }
      }
    },
    {
      field: 'content',
      label: t('market.industryNews.content'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.content
          }
        }
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'content_cn',
      label: t('market.industryNews.contentCn'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.content_cn
          }
        }
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'action',
      width: schemaParams.actionButtonsTemplate
        ? (schemaParams.actionButtonsTemplate?.length || 3) * 60 + 20 + 'px'
        : 'auto',
      label: t('tableDemo.action'),
      fixed: 'right',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return schemaParams.actionButtonsTemplate
              ? schemaParams.actionButtonsTemplate?.template(data)
              : null
          }
        }
      }
    }
  ])

  return {
    crudSchemas
  }
}
